<template>
  <div class="ios-container" v-loading="loading">
    <el-button type="primary" size="large" @click="showAddBook"> 添加证书 </el-button>
    <el-table v-if="tableData"  :data="tableData.list" border style="width: 100%">
      <el-table-column prop="bundleId" align="center" label="bundleID" width="230"></el-table-column>
      <el-table-column prop="creator" align="center" label="创建人" width="180"></el-table-column>
      <el-table-column prop="download" align="center" label="下载地址" width="300" style="position:relative" v-popover:qrpopover>
        <template slot-scope="scope" >
          <el-popover
          ref="qrpopover"
          placement="top-start"
          title="二维码"
          width="220"
          trigger="hover"
          >
            <div slot="reference" >
               <p>{{scope.row.createTime | toTime('YYYY-MM-DD HH:mm')}}</p>
              <a :href="scope.row.downloadUrl" target="_blank" download class="download-url">{{scope.row.downloadUrl}}</a>
            </div>
            <qriously ref='qrcode' :value='scope.row.downloadUrl' :size='190'  id='mycanvas'></qriously>

        </el-popover>

        </template>

      </el-table-column>
      <el-table-column prop="certificate" align="center" label="证书名称" width="200"> </el-table-column>
      <el-table-column prop="version" align="center" label="版本号" width="150"> </el-table-column>

      <el-table-column prop="plist" align="center" label="plist文件" width="150">
        <template slot-scope="scope">
          <div class="upload-wrap">
            <el-button size="small" type="primary" ><a :href="scope.row.downloadUrl" target="_blank" download>下载</a> </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="状态" width="120">
        <template slot-scope="scope">
          <span class="isRed" :class="{isRed: scope.row.status == 0, isGreen: scope.row.status == 1,}">
            {{  scope.row.status == 0 ? '已关闭' : '已开启'}} </span>
        </template>
      </el-table-column>
       <el-table-column prop="type" align="center" label="类型" width="120">
        <template slot-scope="scope">
          {{scope.row.type | getType}}
        </template>
      </el-table-column>
      <el-table-column prop="downloadCount" align="center" label="下载次数" width="120"> </el-table-column>

      <el-table-column prop="installCount" align="center" label="安装次数" width="120"> </el-table-column>
      <el-table-column prop="installCount" align="center" label="操作" width="220">
        <template slot-scope="scope">
          <div class="upload-wrap ">
              <el-button type="primary" size="small" @click="changStatus(scope.row.id,scope.row.status)"> {{ scope.row.status == 1 ? '关闭' : '开启' }} </el-button>
               <el-button type="primary" size="small" @click="toDelete(scope.row.id)"> 删除 </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination v-if="tableData" background @size-change="gridSizeChange" @current-change="gridCurrentChange"
      :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size" :layout="gridLayout"
      :total="Number(tableData.total)">
    </el-pagination>

    <IosAddBook :dialogVisible="isShowAddBook" @cancel="hideAddBook" />
  </div>
</template>

<script>
import IosAddBook from './iosAddBook';
// import Cookies from 'js-cookie';
import { form, grid } from '@/build';
import { messageType } from '@/const/enum';
import {
  systemIpaList, systemIpaClose, systemIpaOpen, systemIpaDelete,
} from '@/services/api/system';

export default {
  name: 'system-ios-manage',
  components: {
    IosAddBook,
    // osUpload,
  },
  mixins: [grid, form],
  data() {
    return {
      uploadTitle: '',
      tableData: [],
      // 上传按钮控制弹窗
      isShowAddBook: false,
      // 添加证书表单弹窗
      // isShowUpload: false,
      // iosUploadApi: `${api.UPLOAD_PIC}?token=${Cookies.get(consts.CACHE_TOKEN)}&uid=${Cookies.get(consts.CACHE_UID)}`,
      form: {

      },
      filters: {
        status: '',
        size: 10,
        page: 1,
      },
      recordId: null,
    };
  },
  filters: {
    getType(type) {
      let typeStr = '';
      switch (type) {
        case 0:
          typeStr = '娱乐';
          break;
        case 1:
          typeStr = '体育';
          break;
        case 2:
          typeStr = '代理';
          break;
        default:
          break;
      }
      // console.log(type);
      return typeStr;
    },
  },
  methods: {
    // 显示添加证书弹窗
    showAddBook() {
      this.isShowAddBook = true;
    },
    hideAddBook() {
      this.isShowAddBook = false;
    },
    // 开启和关闭按钮
    changStatus(recordId, status) {
      this.recordId = recordId;
      if (status == 0) { // 开启
        this.doSave({ action: 'openIpa' });
      } else { // 关闭
        this.doSave({ action: 'closeIpa' });
      }
    },
    async toDelete(recordId) {
      // this.recordId = recordId;
      try {
        await this.$confirm('确定要删除证书吗？', '删除证书', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        const [status, result] = await systemIpaDelete({
          recordId,
        });
        if (!status) throw new Error(result.message);
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.getAll();
      } catch (e) {
        if (e === messageType.cancel) return;
        this.$message({
          type: 'error',
          message: `删除失败!${e.message || ''}`,
        });
      }
    },
  },
  created() {
  },
  mounted() {
    this.bindGet(systemIpaList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      format: (data) => {
        this.tableData = data.list;
        return data;
      },
    });
    this.getAll();
    this.bindSave(systemIpaClose, 'closeIpa', 'recordId', {
      beforeSend: data => ({
        recordId: this.recordId,
      }),
      successMessage: '关闭成功',
      afterSuccess: ([result]) => {
        if (result) {
          this.getAll();
        }
      },
    });
    this.bindSave(systemIpaOpen, 'openIpa', 'recordId', {
      beforeSend: data => ({
        recordId: this.recordId,
      }),
      successMessage: '开启成功',
      afterSuccess: ([result]) => {
        if (result) {
          this.getAll();
        }
      },
    });
  },

};
</script>
<style scoped lang="scss">
  /deep/.ios-container {
    padding: 20px;
    .el-pagination {
      margin-top: 30px;
    }
    .el-table {
      margin-top: 20px;

      .el-table__header {
        .has-gutter {
          th {
            padding: 15px 0;
          }
        }
      }

      .el-table__row {
        .cell {
          a {
            color: blue ;
            text-decoration: underline ;
          }

          .upload-wrap {
            display: flex;
            justify-content: center;

            >button {
              margin-left: 13px;
            }
          }

          p {
            margin: 3px 0;
          }

          h3 {
            margin: 3px 0;
          }

          .isRed {
            color: #FF0000;
          }

          .isGreen {
            color: #008000
          }
        }
      }
    }
  }
</style>
